import styles from './index.module.scss'
import ArticleItem from '../ArticleItem'
import { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { getArticleList, getMoreArticleList } from '@/store/actions/home'
import { PullToRefresh, InfiniteScroll } from 'antd-mobile-v5'

/**
 * 文章列表组件
 * @param {String} props.channelId 当前文章列表所对应的频道ID
 * @param {String} props.aid 当前 Tab 栏选中的频道ID
 */
const ArticleList = ({ channelId, activeId }) => {
  // console.log(channelId, activeId)
  const dispatch = useDispatch()
  const current = useSelector((state) => state.home.articles[channelId])
  useEffect(() => {
    if (channelId === activeId) {
      if (current) return
      dispatch(getArticleList(channelId, Date.now()))
    }
  }, [channelId, activeId, dispatch, current])

  // 控制是否加载更多内容
  const [hasMore, setHasMore] = useState(true)
  // 控制是否正在加载
  const [loading, setLoading] = useState(false)

  // 下拉刷新
  const onRefresh = () => {
    // 下拉刷新需要加载新的数据
    setHasMore(true)
    dispatch(getArticleList(channelId, Date.now()))
  }

  // 上拉加载
  // 加载更多的回调函数
  const loadMore = async () => {
    // 如果正在加载，不用加载更多的内容
    if (loading) return
    // 如果不是当前的频道不需要加载
    if (channelId !== activeId) return
    // 正在加载
    setLoading(true)

    // 如果内容加载全部加载完成，不需要加载更多数据
    if (!current.timestamp) {
      setHasMore(false)
      return
    }

    try {
      // 调用接口获取更多的数据
      await dispatch(getMoreArticleList(channelId, current.timestamp))
    } finally {
      // 数据获取完成之后，加载完成
      setLoading(false)
    }
  }
  // 如果不是当前频道，不用渲染内容
  if (!current) return null
  return (
    <div className={styles.root}>
      {/* 上啦刷新 */}
      <PullToRefresh onRefresh={onRefresh}>
        <div className="articles">
          {current.list.map((item) => (
            <div className="article-item" key={item.art_id}>
              <ArticleItem
                className="article-item"
                article={item}
              ></ArticleItem>
            </div>
          ))}
        </div>
      </PullToRefresh>
      {/* 下拉加载 */}
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
    </div>
  )
}

export default ArticleList
